<template>
  <div header-component>
    <div class="header-logo"></div>
    <div class="login" v-if="common.userInfo">
        <span >{{common.userInfo.account}}</span>
        <Avatar icon="person" size="large" src=""/>
        <Button type="text" @click="onLogoutClicked">退出</Button>
    </div>
  </div>
</template>

<script>
import _ from "../../libs/utils";
import store from "../../stores/store";
import api from "../../services/auth.api";

export default {
  data() {
    return {
      common: store.common
    };
  },
  methods: {
    onLogoutClicked: function() {
      api.logout().then(d => {
        if (d.stat == "ok") {
          this.$router.push("/login");
        }
      });
    }
  },
  mounted() {
    //if (store.common.userInfo == null) {
      //this.$router.push("/login");
    //}
  }
};
</script>

<style scoped>
[header-component] {
}
.header-logo {
  width: 100px;
  height: 30px;
  background: #5b6270;
  border-radius: 3px;
  float: left;
  position: relative;
  top: 15px;
  left: 20px;
}
.login {
  float: right;
  font-size: 14px;
  color: #666;
  margin: 10px 24px;
}
.login span {
  margin-right: 15px;
}
</style>